<!DOCTYPE html>
<html>
<!-- aaa -->
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<title>时光倒计时</title>
		<style>
			html,
			body,
			#app {
				height: 100%;
				width: 100%;
				margin: 0;
				overflow: hidden;
			}
			
			.main .countdown {
				text-align: center;
				margin-top: 120px;
			}
			
			.background1 {
				background-color: #33FFFF;
				background: linear-gradient(top, #33FFFF, #99FFFF);
				background: -moz-linear-gradient(top, #33FFFF, #99FFFF);
				/* Firefox */
				background: -webkit-linear-gradient(top, #33FFFF, #99FFFF);
				/* Webkit */
				background: -o-linear-gradient(top, #33FFFF, #99FFFF);
				/* Opera */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#33FFFF', endColorstr='#99FFFF')";
				/* IE9 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#33FFFF", endColorstr="#99FFFF");
				/* IE */
			}
			
			.background2 {
				background-color: #FCFCFC;
				background: linear-gradient(top, #E0E0E0, #FCFCFC);
				background: -moz-linear-gradient(top, #E0E0E0, #FCFCFC);
				/* Firefox */
				background: -webkit-linear-gradient(top, #E0E0E0, #FCFCFC);
				/* Webkit */
				background: -o-linear-gradient(top, #E0E0E0, #FCFCFC);
				/* Opera */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#FCFCFC')";
				/* IE9 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E0E0E0", endColorstr="#FCFCFC");
				/* IE */
			}
			
			.background3 {
				background-color: #248AB2;
				background: linear-gradient(top, #248AB2, #50BCE6);
				background: -moz-linear-gradient(top, #248AB2, #50BCE6);
				/* Firefox */
				background: -webkit-linear-gradient(top, #248AB2, #50BCE6);
				/* Webkit */
				background: -o-linear-gradient(top, #248AB2, #50BCE6);
				/* Opera */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB2', endColorstr='#50BCE6')";
				/* IE9 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#248AB2", endColorstr="#50BCE6");
				/* IE */
			}
			
			.background4 {
				background-color: #FFC800;
				background: linear-gradient(top, #FFA900, #FFC800);
				background: -moz-linear-gradient(top, #FFA900, #FFC800);
				/* Firefox */
				background: -webkit-linear-gradient(top, #FFA900, #FFC800);
				/* Webkit */
				background: -o-linear-gradient(top, #FFA900, #FFC800);
				/* Opera */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA900', endColorstr='#FFC800')";
				/* IE9 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFA900", endColorstr="#FFC800");
				/* IE */
			}
			
			.background5 {
				background-color: #FF4160;
				background: linear-gradient(top, #FF4160, #FF8095);
				background: -moz-linear-gradient(top, #FF4160, #FF8095);
				/* Firefox */
				background: -webkit-linear-gradient(top, #FF4160, #FF8095);
				/* Webkit */
				background: -o-linear-gradient(top, #FF4160, #FF8095);
				/* Opera */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF4160', endColorstr='#FF8095')";
				/* IE9 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF4160", endColorstr="#FF8095");
				/* IE */
			}
			
			.btn {
				position: absolute;
				bottom: 20px;
				left: 20px;
				width: 20px;
				height: 20px;
				border-radius: 5px;
				box-shadow: 1px 2px 5px #888;
			}
			
			canvas {
				display: block;
				left: 50%;
				margin: -51px 0 0 -201px;
				position: absolute;
				top: 42%;
				transform: rotatey(180deg);
			}
			
			.text-title {
				top: 60%;
				position: absolute;
				left: 30px;
				font-size: 18px;
			}
			
			.text-time {
				position: absolute;
				right: 50px;
				top: 68%;
				font-size: 24px;
			}
		</style>
		<!-- vue -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

		<!-- mint-ui -->
		<!-- 引入样式 -->
		<!--<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">-->
		<!-- 引入组件库 -->
		<!--<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>-->

		<!-- 其他 -->
		<script src="jquery/jquery-1.8.2.min.js"></script>
		<link href="jcountdown/jcountdown.css" rel="stylesheet" type="text/css">
		<script src="jcountdown/jquery.jcountdown.min.js"></script>

		<script src="js/prefixfree.min.js"></script>

	</head>

	<body>
		<div id="app" :class="appBackground">
			<div class="main">
				<!--倒计时-->
				<div class="countdown"></div>
			</div>
			<div class="text-title">
				你已经来到世上
			</div>
			<div class="text-time">
				{{d}}天{{h}}时{{m}}分{{s}}秒了
			</div>
			<div class="btn background1" @click="changeBackground(0)"></div>
			<div class="btn background2" @click="changeBackground(1)" style="left: 50px;"></div>
			<div class="btn background3" @click="changeBackground(2)" style="left: 80px;"></div>
			<div class="btn background4" @click="changeBackground(3)" style="left: 110px;"></div>
			<div class="btn background5" @click="changeBackground(4)" style="left: 140px;"></div>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					d: 111,
					h: 11,
					m: 0,
					s: 22,
					backgroundList: ['background1', 'background2', 'background3', 'background4', 'background5'],
					appBackground: 'background2'
				},
				methods: {
					changeBackground: function(type) {
						this.appBackground = this.backgroundList[type];
					}
				}
			})

			function init() {
				var now = new Date();
				var bir = new Date('1995-5-3 18:20:00');
				var over = new Date('2075-5-3 18:20:00');
				var p = Math.round((now.getTime() - bir.getTime()) / (over.getTime() - bir.getTime()) * 100);
				obj.setProgress(100 - p);
			}

			setInterval(function() {
				var date1 = new Date('1995-5-3 18:20:00'); //开始时间
				var date2 = new Date(); //结束时间
				var date3 = date2.getTime() - date1.getTime() //时间差的毫秒数

				//计算出相差天数
				vm.d = Math.floor(date3 / (24 * 3600 * 1000));

				//计算出小时数

				var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				vm.h = Math.floor(leave1 / (3600 * 1000))
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				vm.m = Math.floor(leave2 / (60 * 1000))
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				vm.s = Math.round(leave3 / 1000)
//				alert(" 相差 " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
			}, 1000)

			//  --------------------------------------------------------------------------
			$(function() {

				//计算时间
				//1995 5 3 18 20

				config = {
					timeText: '2075/5/3 18:20:00', //倒计时时间，格式：年/月/日 时:分:秒
					timeZone: '8', //时区，GMT号码
					style: "flip", //显示的样式，可选值有flip,slide,metal,crystal(翻动、滑动、金属、水晶)
					color: "black", //显示的颜色，可选值white,black(黑色、白色)
					width: 240, //倒计时宽度，无限制，默认为0
					textGroupSpace: 15, //天、时、分、秒之间间距
					textSpace: 0, //数字之间间距
					reflection: !0, //是否显示倒影
					reflectionOpacity: 10, //倒影透明度
					reflectionBlur: 0, //倒影模糊程度
					dayTextNumber: 5, //倒计时天数数字个数
					displayDay: !0, //是否显示天数
					displayHour: !!0, //是否显示小时数
					displayMinute: !!0, //是否显示分钟数
					displaySecond: !0, //是否显示秒数
					displayLabel: !0, //是否显示倒计时底部label
					onFinish: function() {} //完成事件，您可以在时间结束时执行一些脚本，在创建倒计时时只需传递一个函数即可。
				};
				$(".countdown").jCountdown(config);

				init();
			});
		</script>
		<script src="js/index.js"></script>
	</body>

</html>